<template>
    <div>
        <div class="table-page-search-wrapper">
            <el-form class="ant-form ant-form-inline">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="属性名:">
                            <el-input v-model="menu.attributeName" style="text-overflow: ellipsis;"
                                placeholder="请输入属性名查询"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" @click="search">查 询</el-button>
                            <el-button style="margin-left: 8px;" @click="reset">重 置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </div>
        <div class="table-operator" style="margin-top: 5px;">
            <el-button type="primary" v-perm:commodity:material_attribute:insert="insert"><el-icon>
                    <Plus fill="currentColor" />
                </el-icon>新增</el-button>
            <el-dropdown>
                <el-button style="margin-left: 10px;">
                    批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <template v-for="item in strBtn">
                            <template v-if="item === '编辑'">
                                <el-dropdown-item @click="removes">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                    <span>删除</span>
                                </el-dropdown-item>
                            </template>


                        </template>

                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <i aria-label="图标: question-circle" tabindex="-1" class="anticon anticon-question-circle"
                style="font-size: 20px; float: right;"></i>
        </div>
        <div style="margin-top: 10px;  width: 100%;">
            <el-table v-loading="loading" @selection-change="handleSelectionChange" :data="page.records"
                style="width: 100% ;max-height:442px;" border>
                <el-table-column width="50" type="selection"></el-table-column>
                <el-table-column type="index" width="50" label="#"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <div style="display: flex; align-items: center;">
                            <el-button :row="scope.row" v-perm:commodity:material_attribute:update="update" type="text"
                                size="small">编辑</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-popconfirm title="确认删除该项吗？" @confirm="remove(scope.row)">
                                <template #reference>
                                    <el-button v-perm:commodity:material_attribute type="text"
                                        size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="attributeName" width="200" label="属性名"></el-table-column>
                <el-table-column prop="attributeValue" label="属性值（用竖线隔开）"></el-table-column>
            </el-table>
            <div style="display: flex; justify-content: flex-end; margin-top: 10px; margin-bottom: 50px;">
                <el-pagination v-model:page-size="page.size" v-model:currentPage="page.current"
                    @current-change="loadMenus" :page-sizes="[10, 20, 30, 50, 100]" :pager-count="7"
                    layout="total, sizes, prev, pager, next, jumper" :total="page.total" background>
                </el-pagination>
            </div>
        </div>
        <div>
            <el-dialog :title="title" v-model="visible" style="margin-top: 200px;">
                <router-view @close="close" :data="data"></router-view>
            </el-dialog>
        </div>
    </div>

</template>

<script setup>
import { ref, defineProps } from 'vue';
import router from '@/router'
import reqeust from '@/api/request'
import { ElMessage } from 'element-plus';
const props = defineProps(['strBtn'])
//弹窗
let visible = ref(false)
let title = ref("")
let data = ref({})
//分页查询
let page = ref({})
let menu = ref({})
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'; // 根据你的项目配置引入图标
// 定义响应式变量来控制搜索框显示

// 定义响应式变量来控制搜索框显示
const loading = ref(false)
// 定义分页查询方法
let loadMenus = () => {
    loading.value = true; // 请求开始，设置加载状态为 true
    console.log("内容")
    reqeust({
        url: '/commodity/material_attribute/findByPage',
        method: "get",
        params: {
            current: page.value.current,
            size: page.value.size,
            ...menu.value
        }
    }).then(res => {
        page.value = res.data
    }).finally(() => {
        loading.value = false; // 请求结束，设置加载状态为 false
    });
}
// 查询方法
const search = () => {
    page.value.current = 1; // 重置为第一页
    loadMenus(); // 调用查询
}

// 重置方法
const reset = () => {
    menu.value = {}; // 清空查询条件
    loadMenus(); // 重新加载数据
}
// 初次加载数据
loadMenus();
// 新增弹窗
let insert = (menu) => {
    title.value = menu.cname
    visible.value = true;
    console.log(menu)
    router.push(menu.path)

}
// 编辑弹窗
let update = (menu, row) => {
    title.value = menu.cname
    visible.value = true;
    data.value = row
    router.push(menu.path)

}
// 删除
let remove = (row) => {
    //   request.delete("/commodity/material_attribute/delete" + row.id).then(resp => {
    //     loadMenus();
    //   });
    reqeust.delete("/commodity/material_attribute/delete" + "/" + row.id).then(resp => {
        loadMenus();
    });
};
//多选值
let multipleSelection = ref([])
let ids = ref([]);

//获取多选的值转入multipleSelection中
let handleSelectionChange = (val) => {
    multipleSelection.value = val;
    ids.value = val.map(item => item.id);
}

//批量删除
let removes = () => {
    if (ids.value.length === 0) {
        ElMessage.warning('请先选择至少一项记录');
        return;
    }



    reqeust.delete("/commodity/material_attribute/delete", {
        data: ids.value
    }).then(resp => {
        ElMessage.success(resp.data);
        loadMenus();
    }).catch(error => {
        ElMessage.error('删除失败，请重试！');
        console.error(error);
    });

};

//关闭弹窗
let close = () => {
    visible.value = false;
    loadMenus();
}
</script>

<style scoped></style>
